<!-- seach START -->
<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">用户身份</label>
                <div class="common-search-conrol">
                    <nz-select [(ngModel)]="queryForm.userType">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="游客" nzValue="0"></nz-option>
                        <nz-option nzLabel="爱思用户" nzValue="1"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">用户</label>
                <div class="common-search-conrol">
                    <input nz-input placeholder="请输入游客udid/联系电话/爱思手机号/爱思用户名" [(ngModel)]="queryForm.keyword">
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select [(ngModel)]="queryForm.state">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="已处理" nzValue="1"></nz-option>
                        <nz-option nzLabel="待处理" nzValue="0"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">渠道</label>
                <div class="common-search-conrol">
                    <nz-select [(ngModel)]="queryForm.platform">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="H5" nzValue="1"></nz-option>
                        <nz-option nzLabel="PC" nzValue="2"></nz-option>
                        <nz-option nzLabel="APP" nzValue="3"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">业务</label>
                <div class="common-search-conrol">
                    <nz-select [(ngModel)]="queryForm.business">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="配件" nzValue="1"></nz-option>
                        <nz-option nzLabel="回收" nzValue="2"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">意见分类</label>
                <div class="common-search-conrol">
                    <nz-select [(ngModel)]="queryForm.option">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="订单相关" nzValue="200"></nz-option>
                        <nz-option nzLabel="物流相关" nzValue="201"></nz-option>
                        <nz-option nzLabel="商品相关" nzValue="202"></nz-option>
                        <nz-option nzLabel="活动优惠" nzValue="203"></nz-option>
                        <nz-option nzLabel="售后相关" nzValue="204"></nz-option>
                        <nz-option nzLabel="回收价格" nzValue="100"></nz-option>
                        <nz-option nzLabel="回收打款" nzValue="101"></nz-option>
                        <nz-option nzLabel="设备验机" nzValue="102"></nz-option>
                        <nz-option nzLabel="活动加价" nzValue="103"></nz-option>
                        <nz-option nzLabel="物流相关" nzValue="104"></nz-option>
                        <nz-option nzLabel="使用建议" nzValue="105"></nz-option>
                        <nz-option nzLabel="其他问题" nzValue="106"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">提交时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [(ngModel)]="queryForm.createFormat"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">处理时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [(ngModel)]="queryForm.processFormat"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button 
                        nz-button
                        nzType="primary"
                        class="m-r-8"
                        (click)="query()"
                    >查询</button>
                    <button
                        nz-button
                        nzType="default"
                        (click)="reset()"
                    >重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>
<!-- seach END -->

<nz-card class="m-t-4">
    <div class="opera-wrap">
        <button
            nz-button
            nzType="primary"
            [nzLoading]="exportLoading"
            (click)="exportTable()"
        >
            <i nz-icon nzType="download" nzTheme="outline"></i>导出
        </button>
    </div>

    <div class="pagination-wrap-position table-wrap p-t-15">
        <nz-table
            #basicTable
            nzSize="small"
            nzTableLayout="fixed"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzScroll]="{ x: '1100px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="queryForm.pageNum"
            [nzPageSize]="queryForm.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
        >
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="140px" nzLeft>ID</th>
                    <th nzAlign="center" nzWidth="220px">渠道</th>
                    <th nzAlign="center" nzWidth="130px">业务</th>
                    <th nzAlign="center" nzWidth="220px">意见分类</th>
                    <th nzAlign="center" nzWidth="220px">意见描述</th>
                    <th nzAlign="center" nzWidth="120px">用户身份</th>
                    <th nzAlign="center" nzWidth="120px">联系电话</th>
                    <th nzAlign="center" nzWidth="170px">提交时间</th>
                    <th nzAlign="center" nzWidth="120px">处理人</th>
                    <th nzAlign="center" nzWidth="170px">处理时间</th>
                    <th nzAlign="center" nzWidth="130px">状态</th>
                    <th nzAlign="center" nzWidth="150px" nzRight>操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let i = index;">
                    <!-- ID -->
                    <td nzAlign="center" nzLeft>{{ data.id }}</td>
                    <!-- 渠道 -->
                    <td nzAlign="center">
                        <ng-container *ngFor="let channelItem of channelSelects">
                            <nz-tag
                                *ngIf="channelItem.content == data.platform"
                                [nzColor]="channelItem.color">
                                {{ channelItem.name }}
                            </nz-tag>
                        </ng-container>
                        <span *ngIf="!data.platform">-</span>
                    </td>
                    <!-- 业务 -->
                    <td nzAlign="center">
                        <!-- <div [ngSwitch]="data.business">
                            <div *ngSwitchCase="1">配件</div>
                            <div *ngSwitchCase="2">回收</div>
                            <div *ngSwitchCase="3">二手商城</div>
                            <div *ngSwitchDefault>-</div>
                        </div> -->
                        {{ filterText(businessOptins, data.business, 'content') }}
                    </td>
                    <!-- 意见分类 -->
                    <td nzAlign="center">
                        {{ option_to_Text(data.options) }}
                    </td>
                    <!-- 意见描述 -->
                    <td nzAlign="center" nzEllipsis [title]="data.content" style="color: #1890ff;">
                        {{ data.content || '-' }}
                    </td>
                    <!-- 用户身份 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="data.userType === 1;else templateUser">
                            <button
                                nz-button
                                nzType="link"
                                nzSize="small"
                                (click)="i4show(data)"
                            >爱思用户</button>
                        </ng-container>
                        <ng-template #templateUser>游客</ng-template>
                    </td>
                    <!-- 联系电话 -->
                    <td nzAlign="center">{{ data.mobile || '-' }}</td>
                    <!-- 提交时间 -->
                    <td nzAlign="center">{{ data.createTime || '-' }}</td>
                    <!-- 处理人 -->
                    <td nzAlign="center">{{ data.processUser || '-' }}</td>
                    <!-- 处理时间 -->
                    <td nzAlign="center">{{ data.processTime || '-' }}</td>
                    <!-- 状态 -->
                    <td nzAlign="center">
                        <span [ngStyle]="{'color': data.processResult === 0 ? '#f50' : '#87d068'}">
                            {{ data.processResult === 0 ? '待处理' : '已处理' }}
                        </span>
                    </td>
                    <!-- 操作 -->
                    <td nzAlign="center" nzRight>
                        <a
                            *ngIf="permission.userPermission.has('recycle:feedback:view')"
                            nz-button
                            nzType="link"
                            (click)="showModal(data, i)"
                        >查看</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>

<nz-modal [(nzVisible)]="isVisible" nzTitle="查看" (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
        <!-- <form nz-form [formGroup]="modalForm"> -->
            <nz-form-item>
                <nz-form-label>渠道</nz-form-label>
                <nz-form-control>
                    <ng-container *ngFor="let channelItem of channelSelects">
                        <nz-tag
                            *ngIf="channelItem.content == processInfo?.platform"
                            [nzColor]="channelItem.color">
                            {{ channelItem.name }}
                        </nz-tag>
                    </ng-container>
                    <span *ngIf="!processInfo?.platform">-</span>
                    <!-- {{ platform_to_text() }} -->
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>业务</nz-form-label>
                <nz-form-control>
                    {{ processInfo?.business == 1 ? '配件' : processInfo?.business == 2 ? '回收' : processInfo?.business == 3 ? '二手商城' :  '-' }}
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>意见类型</nz-form-label>
                <nz-form-control>
                    {{ option_to_Text(processInfo?.options)}}
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>意见描述</nz-form-label>
                <nz-form-control>
                    {{ processInfo?.content }}
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="processInfo?.originalPhotos">
                <nz-form-label>图片</nz-form-label>
                <nz-form-control>
                    <ul class="imgs-list" *ngIf="originalPhotos.length">
                        <li *ngFor="let data of originalPhotos; index as i">
                            <img nz-image nzSrc="{{data.url}}" [nzFallback]="fallback" />
                        </li>
                    </ul>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>联系方式</nz-form-label>
                <nz-form-control>
                    {{ processInfo?.mobile ? processInfo?.mobile : '---' }}
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>处理备注</nz-form-label>
                <nz-form-control>
                    <textarea rows="4" nz-input placeholder="备注仅供内部查看"
                        [(ngModel)]="modalForm.processContent"></textarea>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control [nzOffset]="12">
                    <label nz-checkbox [(ngModel)]="nextChecked">继续处理下一条</label>
                    <!-- <button nz-button nzType="default" (click)="handleCancel()">取消</button> -->
                    &nbsp;
                    <button nz-button nzType="primary" [nzLoading]="handleLoading" (click)="submitForm()">确定</button>
                </nz-form-control>
            </nz-form-item>
        <!-- </form> -->
    </ng-container>
</nz-modal>


<!-- 爱思用户 -->
<nz-modal [(nzVisible)]="i4UserVisible" nzTitle="爱思用户信息" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <div class="panelgroup">
            <div class="panel-bd">
                <ul>
                    <li>
                        <div class="key">
                            <span>用户身份</span>
                        </div>
                        <div class="val">
                            <span>爱思用户</span>
                        </div>
                    </li>
                    <li>
                        <div class="key">
                            <span>ID</span>
                        </div>
                        <div class="val">
                            <span>{{ UserDetails?.id ? UserDetails?.id :'-'}}</span>
                        </div>
                    </li>
                    <li>
                        <div class="key">
                            <span>手机号</span>
                        </div>
                        <div class="val">
                            <span>{{ UserDetails?.phone ? UserDetails?.phone : '-' }}</span>
                        </div>
                    </li>
                    <li>
                        <div class="key">
                            <span>用户名</span>
                        </div>
                        <div class="val">
                            <span>{{ UserDetails?.username ? UserDetails?.username : '-'}}</span>
                        </div>
                    </li>
                    <li>
                        <div class="key">
                            <span>昵称</span>
                        </div>
                        <div class="val">
                            <span>{{ UserDetails?.nickname ? UserDetails?.nickname : '-' }}</span>
                        </div>
                    </li>
                    <li>
                        <div class="key">
                            <span>微信openid</span>
                        </div>
                        <div class="val">
                            <span>{{ UserDetails?.openid ? UserDetails?.openid : '-' }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </ng-container>
</nz-modal>
